<template>
  <div>
    <div id="homeFooter">
      <van-tabbar v-model="active" active-color="#333" :route="true">
        <van-tabbar-item icon="fangzi" to="/home">首页</van-tabbar-item>
        <van-tabbar-item icon="fenlei" to="/cate">分类</van-tabbar-item>
        <van-tabbar-item
          :badge="$store.state.cart.cart.items.length||''"
          icon="gouwudai"
          to="/cart"
        >购物袋</van-tabbar-item>
        <van-tabbar-item icon="wode" to="/user">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="scss" scoped>
#homeFooter {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 50px;
  z-index: 10;
  .van-tabbar {
    display: flex;
    height: 50px;
    align-content: center;
    background: #c2a883;
    /deep/.van-tabbar-item__text{
      font-size: 21px;
    }
    /deep/.van-info{
      right: -21px;
      font-size: 14px;
    }
  }
}
</style>
